<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .user-info {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 10px;
            background-color: #eee;
        }
        
        .user-info span {
            margin-right: 10px;
        }
        .left-btn {
            margin-right: auto;
        }
        .btn {
            padding: 5px 10px;
            background-color: #ccc;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="header">
        <h1>招投标管理系统</h1>
    </div>


    <div id="app">
        
        <div class="user-info">
            <div class="left-btn">
                <el-button type="primary" @click="manufacturer_click" class="btn">机电设备厂家详情</el-button>
                <el-button type="primary" @click="unit_click" class="btn">招标单位详情</el-button>
                <el-button type="primary" @click="message_click" class="btn">留言板</el-button>
            </div>
            <span>欢迎您：{{ currentUser }}</span>
            <el-button type="danger" @click="logout">退出</el-button>
        </div>

        <h2 style="text-align: center">留言板</h2>
        <template>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName">
              <el-table-column
                type="index"
                width="120">
              </el-table-column>
              <el-table-column
              prop="person"
              label="留言人"
              width="180">
            </el-table-column>
              <el-table-column
                prop="message"
                label="内容"
                width="600">
              </el-table-column>
              <el-table-column
                prop="time"
                label="留言时间"
                width="180">
              </el-table-column>

              <el-table-column>
                <template slot-scope="scope">
                    <el-button type="danger" @click="deleteInfo(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
        </template>
    </div>


    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>    
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

    <script>
        new Vue({
            el:"#app",
            mounted(){
                this.first();
                this.selectMessage();
            },
            data() {
                return {
                    currentUser: "",
                    tableData: [],
                }
            },
            methods: {
              first(){
                    var _this = this;
                    $.ajax({
                        method:'get',
                        url:'userInfo',
                        success:function(resp){
                            _this.currentUser=resp.companyName;
                        }
                    })
              },
              selectMessage(){
                    var _this = this;
                    $.ajax({
                        method:'get',
                        url:'message',
                        success:function(resp){
                            _this.tableData=resp;
                        }
                    })
              },
              deleteInfo(row){
                    var _this = this;
                    this.selectedRow = row; // 保存选中行的数据
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 发送请求删除数据
                        $.ajax({
                        method:'post',
                        url: "delMessage",
                        data: {
                            id: row.id, // 根据实际情况传递选中行的唯一标识符
                        },
                        success:function(data){
                            if(data != 0){
                                alert("删除成功");
                                _this.selectMessage();   
                            }
                            else{
                                alert("删除失败")
                            }
                        },
                        })
                    })
                    
              },
              manufacturer_click(){
                location.replace("admin.html");
              },
              unit_click(){
                location.replace("admin_unit.html");
              },
              message_click(){
                location.replace("admin_message.html");
              },
              logout(){
                    $.ajax({
                        method:'post',
                        url:'logout',
                        success:function(resp){
                            alert("退出成功！");
                        }
                    })
                    location.replace("/index.html");
              },
              tableRowClassName({row, rowIndex}) {
                  if (rowIndex === 1) {
                  return 'warning-row';
                  } else if (rowIndex === 3) {
                  return 'success-row';
                  }
                  return '';
              },

            },
        })
    </script>
</body>
</html>